<html>
	<head>
		<title>Pinnacle Books | Pricing Research</title>
		<link rel="shortcut icon" href="/public/images/fav.ico" />
		<link rel="stylesheet" href="/public/stylesheets/main.css" type="text/css" media="screen" />
		<script type="text/javascript" src="/public/javascripts/jquery-1.6.4.min.js"></script>
		<script type="text/javascript" src="/public/javascripts/jqBarGraph.1.1.js"></script>
		
		<script>
			var arrayOfData;
			$(document).ready(function() {
				if(${total_sales} != "" && ${total_sales} != "" && ${total_sales} != ""){
					arrayOfData = new Array(${total_sales});
					$('#total_sales_header').append("<h1>Total Sales Across Last 30 Days (in $)</h1>");
					$('#total_sales_header').append("<a href='#sales' onclick='sales_asc()'>Sort Ascending</a> | <a href='#sales' onclick='sales_desc()'>Sort Descending</a> | <a href='#sales' onclick='sales_reset()'>Reset</a>");
					$('#total_sales').jqBarGraph({ data: arrayOfData });		
					
					arrayOfData = new Array(${total_sold_items});
					$('#total_sold_items_header').append("<h1>Total Sold Items Across Last 30 Days</h1>");
					$('#total_sold_items_header').append("<a href='#qty' onclick='qty_asc()'>Sort Ascending</a> | <a href='#qty' onclick='qty_desc()'>Sort Descending</a> | <a href='#qty' onclick='qty_reset()'>Reset</a>");
					$('#total_sold_items').jqBarGraph({ data: arrayOfData });
					
					arrayOfData = new Array(${average_sold_price});
					$('#average_sold_price_header').append("<h1>Average Sold Price Across Last 30 Days (in $)</h1>");
					$('#average_sold_price_header').append("<a href='#price' onclick='price_asc()'>Sort Ascending</a> | <a href='#price' onclick='price_desc()'>Sort Descending</a> | <a href='#price' onclick='price_reset()'>Reset</a>");
					$('#average_sold_price').jqBarGraph({ data: arrayOfData });					
					
					$('#no_results').css("display", "none");
				}
			});
			
			var sales_asc = function(){
				arrayOfData = new Array(${total_sales});
				$('#total_sales').empty();
				$('#total_sales').jqBarGraph({ data: arrayOfData, sort: 'asc' });
			};
			
			var sales_desc = function(){
				arrayOfData = new Array(${total_sales});
				$('#total_sales').empty();
				$('#total_sales').jqBarGraph({ data: arrayOfData, sort: 'desc' });
			};

			var sales_reset = function(){
				arrayOfData = new Array(${total_sales});
				$('#total_sales').empty();
				$('#total_sales').jqBarGraph({ data: arrayOfData });
			};
			
			var qty_asc = function(){
				arrayOfData = new Array(${total_sold_items});
				$('#total_sold_items').empty();
				$('#total_sold_items').jqBarGraph({ data: arrayOfData, sort: 'asc' });
			};
			
			var qty_desc = function(){
				arrayOfData = new Array(${total_sold_items});
				$('#total_sold_items').empty();
				$('#total_sold_items').jqBarGraph({ data: arrayOfData, sort: 'desc' });
			};

			var qty_reset = function(){
				arrayOfData = new Array(${total_sold_items});
				$('#total_sold_items').empty();
				$('#total_sold_items').jqBarGraph({ data: arrayOfData });
			};					

			var price_asc = function(){
				arrayOfData = new Array(${average_sold_price});
				$('#average_sold_price').empty();
				$('#average_sold_price').jqBarGraph({ data: arrayOfData, sort: 'asc' });
			};
			
			var price_desc = function(){
				arrayOfData = new Array(${average_sold_price});
				$('#average_sold_price').empty();
				$('#average_sold_price').jqBarGraph({ data: arrayOfData, sort: 'desc' });
			};

			var price_reset = function(){
				arrayOfData = new Array(${average_sold_price});
				$('#average_sold_price').empty();
				$('#average_sold_price').jqBarGraph({ data: arrayOfData });
			};				
			
		</script>
	</head>
	
	<body>
		<div id="container">
			<!--Page Header-->
			#{include 'header.html'/}
			
			<!--Page Title-->
			<br /><img src="/public/images/layout/header_research.jpg" />
			
			<!--Page Content-->
			<div id="content">
					<div id="research_box">
					<form action="@{Research.index()}" method="GET">
						<input type="text" name="keywords" placeholder="Enter keywords to look up sales data" size="60" />
						<button type="submit">Research</button>
					</form>
				</div>
			
				#{if keywords}
				You searched for: ${keywords}<br />
				<div id="no_results"><br /><i>Sorry, no results were found. Please try again.</i></div>
				#{/if}
				
				<!--Display Graphs-->
				<div class="font_small">					
					<a name="sales"></a><div id="total_sales_header"></div>
					<div id="total_sales"></div>
					
					<a name="qty"></a><div id="total_sold_items_header"></div>
					<div id="total_sold_items"></div>
					
					<a name="price"></a><div id="average_sold_price_header"></div>
					<div id="average_sold_price"></div>
				</div>
			</div>			
			
			<!--Page Footer-->
			#{include 'footer.html'/}
		</div>
		
	</body>
</html>